// out: false,main:../light_default.less,main:../dark_digital.less

/*
 * @Author: giky 
 * @Date: 2018-12-06 17:05:15 
 * @Last Modified by: giky
 * @Last Modified time: 2019-03-06 17:17:43
 */

/* 动画22 */
.left_box,
// .r-box,
.topen,
.tclose,
#layerBtnItem,
.floatBox {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.testbk {
  border: 1px solid #f00;
}

.topen {
  width: 300px;
}

.tclose {
  width: 100px;
}

.testl {
  float: left;
}

.testr {
  float: left;
}

.mClose {
  position: relative;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

.mOpen {
  visibility: visible;
  opacity: 1;
}

@-webkit-keyframes layui-zy {

  /* 从左往右滑入 */
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes layui-zy {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.layui-anim-zy {
  -webkit-animation-name: layui-zy;
  animation-name: layui-zy;
}

@-webkit-keyframes layui-yz {

  /* 从右往左滑入 */
  from {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}

@keyframes layui-yz {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.layui-anim-yz {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}

.layui-anim-zy.layer-anim-close {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}

/* 动画 */
@-webkit-keyframes zku-rl {

  /* 从右往左滑入 */
  from {
    -webkit-transform: translate3d(100%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@keyframes zku-rl {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.zku-anim-rl {
  -webkit-animation-name: zku-rl;
  animation-name: zku-rl;
}

@-webkit-keyframes zku-lr {

  /* 从右往左滑入 */
  from {
    -webkit-transform: translate3d(0 0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}

@keyframes zku-lr {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}

.zku-anim-lr {
  -webkit-animation-name: zku-lr;
  animation-name: zku-lr;
}

.zku-anim-rl.layer-anim-close {
  -webkit-animation-name: zku-lr;
  animation-name: zku-lr;
}

.animate {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome and Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */
}

.flash(@speed: 1s) {
  -webkit-animation-duration: @speed;
  animation-duration: @speed;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.tx-slow {
  .flash(1s)
}

.tx-fast {
  .flash(0.3s)
}

/* 摇晃  主页右上角消息铃铛*/
@keyframes mShake {
  0% {
    transform: rotate(30deg);
  }

  25% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-30deg);
  }

  75% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(30deg);
  }
}

@keyframes colorchange {

  /*创建动画，使用@keyframes规则*/
  0% {
    background: white;
  }

  50% {
    background: antiquewhite;
  }

  100% {
    background: white;
  }
}

@-webkit-keyframes colorchange {

  /*创建动画，使用@keyframes规则*/
  0% {
    background: white;
  }

  50% {
    background: antiquewhite;
  }

  100% {
    background: white;
  }
}

@-moz-keyframes colorchange {

  /*创建动画，使用@keyframes规则*/
  0% {
    background: white;
  }

  50% {
    background: antiquewhite;
  }

  100% {
    background: white;
  }
}

@keyframes hideIndex {
  0% {
    opacity: 0;
    transform: translate(0, -100px)
  }

  100% {
    opacity: 1;
    transform: translate(0, 0)
  }
}

/* 摇晃  主页右上角消息铃铛*/
@keyframes mShake {
  0% {
    transform: rotate(30deg);
  }

  25% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-30deg);
  }

  75% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(30deg);
  }
}

.msgShake {
  display: inline-block;
  width: 20px;
  animation: mShake 0.5s infinite;
  color: #F9F900;
  font-weight: bold;
}

// 旋转
@-webkit-keyframes zku-rotate {
  from {
    -webkit-transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes zku-rotate {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@{uiName}anim-rotate {
  -webkit-animation-name: zku-rotate;
  animation-name: zku-rotate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
}

@{uiName}anim-loop {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@{uiName}anim {
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}